<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .hide {
            display: none;
        }
        tbody>tr{
            text-align: center;
        }
    </style>
    <script src="./../lib/jquery-3.7.0.js" charset="UTF-8"></script>
    <script>
        /* 名画 */
        let masterpieces = [];

        $(function () {
            $.ajax({
                url: "./../asset/json/data.json",
                type: "get",
                async: false,
                dataType: "json",
                success: function (data) {
                    masterpieces = data;
                    display();
                }
            })
        })

        function display() {
            for (let i = 0; i < masterpieces.length; ++i) {
                let tr = $("<tr></tr>");
                tr.append(new_td(masterpieces[i].id));
                tr.append(new_td(masterpieces[i].name));
                tr.append(new_td(masterpieces[i].dynasty));
                tr.append(new_td(masterpieces[i].author));
                tr.append($("<button class='button_edit' >编辑</button>"));
                tr.append($("<button class='button_delete'>删除</button>"));
                tr.append($("<button class='button_save'>保存</button>"));
                tr.append($("<button class='button_cancel'>取消</button>"));
                $(".con").append(tr);
            }
            $("input").attr("disabled", true);
            $(".button_save").addClass("hide");
            $(".button_cancel").addClass("hide");
            $(".button_edit").bind("click", edit);
        }

        function edit() {
            $(this).parent().find("input").attr("disabled", false);
            let button_edits = $(".button_edit");
            let button_deletes = $(".button_delete");
            button_edits.addClass("hide");
            button_deletes.addClass("hide");

            $(this).parent().find(".button_save").removeClass("hide");
            $(this).parent().find(".button_cancel").removeClass("hide");

            $(this).parent().find(".button_cancel").click(function () {
                button_edits.removeClass("hide");
                button_deletes.removeClass("hide");
                $(this).parent().find(".button_save").addClass("hide");
                $(this).addClass("hide");
                $(this).parent().find("input").attr("disabled", true);
            })

            $(this).parent().find(".button_save").click(function () {
                let tr = $(this).parent();
                let new_id = tr.find("td:first>input").val();
                let new_name = tr.find("td:eq(1)>input").val();
                let new_dynasty = tr.find("td:eq(2)>input").val();
                let new_author = tr.find("td:last>input").val();

                if (confirm("确认保存吗？")) {
                    let id = $(this).parent().find("input").val();
                    let index_array = search_array(id);
                    masterpieces[index_array].id = new_id;
                    masterpieces[index_array].name = new_name;
                    masterpieces[index_array].dynasty = new_dynasty;
                    masterpieces[index_array].author = new_author;

                    button_edits.removeClass("hide");
                    button_deletes.removeClass("hide");
                    $(this).parent().find(".button_save").addClass("hide");
                    $(this).addClass("hide");
                    $(this).parent().find("input").attr("disabled", true);

                    $(".con").html("");
                    display();
                }
            })
        }


        function new_td(value) {
            let td = $("<td></td>");
            let input = $("<input type='text' size='9'/>");
            if (value) {
                input.val(value);
            }
            td.append(input);
            return td;
        }

    </script>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>序号</th>
        <th>名称</th>
        <th>朝代</th>
        <th>作者</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody class="con">

    </tbody>
    <tr>
        <td colspan="5">
            <button class="button_add" onclick="add()">增加</button>
        </td>
    </tr>
</table>
<script>
    let con = $(".con");

    function add() {
        let tr = $("<tr></tr>");
        tr.append(new_td());
        tr.append(new_td());
        tr.append(new_td());
        tr.append(new_td());
        tr.append($("<button class='button_save'>保存</button>"));
        tr.append($("<button class='button_cancel'>取消</button>"));
        con.append(tr);
        $(".button_add").addClass("hide");

        $(".button_cancel").bind("click", cancel);
        $(".button_save").bind("click", save);
    }

    /* 取消 */
    function cancel() {
        if (confirm("是否要取消编辑？")) {
            con.html("");
            display();
            $(".button_add").removeClass("hide");
        }
    }

    /* 保存 */
    function save() {
        let new_id = $(".con>tr:last>td:first>input").val();
        let new_name = $(".con>tr:last>td:nth-child(2)>input").val();
        let new_dynasty = $(".con>tr:last>td:nth-child(3)>input").val();
        let new_author = $(".con>tr:last>td:last>input").val();

        let new_data = {
            "id": new_id,
            "name": new_name,
            "dynasty": new_dynasty,
            "author": new_author
        };

        if (new_id !== '' && new_name !== '' && new_dynasty !== '' && new_author !== '') {
            masterpieces.push(new_data);
        } else {
            alert("请输入完整的内容！");
            return false;
        }

        if (confirm("是否要保存？")) {
            con.html("");
            display();
            $(".button_add").removeClass("hide");
            console.log(masterpieces);
        }
    }

    /* 删除 */
    con.on("click", ".button_delete", function () {
        let id = $(this).parent().find("input").val();

        if (confirm("是否要删除？")) {
            masterpieces.splice(search_array(id), 1);
            con.html("");
            display();
        }
    })

    function search_array(id_value) {
        return masterpieces.findIndex((value) => value.id === id_value);
    }
</script>
</body>
</html>